<section class="content-header">
  <h1>Change Password</h1>
</section>
<section class="content">
  <form novalidate #form="ngForm" (ngSubmit)="changePassword(form)">
    <div class="form-group" [class.has-error]="oldPassInput.invalid && submitted">
      <label>Old Password</label>
      <input type="password" class="form-control" #oldPassInput="ngModel" name="oldPassword" [(ngModel)]="passwordModel.oldPassword"
        minlength="5" maxlength="20" required pattern="^[0-9A-Za-z]*$">
      <div *ngIf="oldPassInput.invalid && submitted">
        <span class="help-block" *ngIf="oldPassInput.errors?.required">Old password cannot be empty.</span>
        <span class="help-block" *ngIf="oldPassInput.errors?.minlength">Old password cannot less than 5 characters.</span>
        <span class="help-block" *ngIf="oldPassInput.errors?.maxlength">Old password cannot more than 20 characters.</span>
        <span class="help-block" *ngIf="oldPassInput.errors?.pattern">Old password cannot contain any special symbol.</span>
      </div>
    </div>
    <div class="form-group" [class.has-error]="newPassInput.invalid && submitted">
      <label>New Password</label>
      <input type="password" class="form-control" #newPassInput="ngModel" name="newPassInput" [(ngModel)]="passwordModel.newPassword"
        minlength="5" maxlength="20" required pattern="^[0-9A-Za-z]*$">
      <div *ngIf="newPassInput.invalid && submitted">
        <span class="help-block" *ngIf="newPassInput.errors?.required">New password cannot be empty.</span>
        <span class="help-block" *ngIf="newPassInput.errors?.minlength">New password cannot less than 5 characters.</span>
        <span class="help-block" *ngIf="newPassInput.errors?.maxlength">New password cannot more than 20 characters.</span>
        <span class="help-block" *ngIf="newPassInput.errors?.pattern">New password cannot contain any special symbol.</span>
      </div>
    </div>
    <div class="form-group" [class.has-error]="confirmPassword.invalid && submitted">
      <label>Confirm Password</label>
      <input type="password" class="form-control" #confirmPassword="ngModel" name="confirmPassword" [(ngModel)]="passwordModel.confirmPassword"
        minlength="5" maxlength="20" required pattern="^[0-9A-Za-z]*$" validateEqual="newPassInput">
      <div *ngIf="confirmPassword.invalid && submitted">
        <span class="help-block" *ngIf="confirmPassword.errors?.required">Confirm password cannot be empty.</span>
        <span class="help-block" *ngIf="confirmPassword.errors?.minlength">Confirm password cannot less than 5 characters.</span>
        <span class="help-block" *ngIf="confirmPassword.errors?.maxlength">Confirm password cannot more than 20 characters.</span>
        <span class="help-block" *ngIf="confirmPassword.errors?.pattern">Confirm password cannot contain any special symbol.</span>
        <span class="help-block" *ngIf="confirmPassword.errors?.validateEqual">Confirm password is not equal the new password .</span>
      </div>
    </div>
    <div class="form-group">
      <button type="submit" class="btn btn-flat bg-olive">Save</button>
    </div>
  </form>
</section>